/**
 * @description 组件样式
 * @author: 陈陈
 * @date: 2025/05/09
 * @phone: 18560000860
 * @email: 18560000860@qq.com
 * @company: 济南晨霜信息技术有限公司 /
 * @business: 承接前后端项目的开发
 */
.pure-input {
    width: var(--pure-input-width);
    height: var(--pure-input-height, 2.5em);
    font-size: var(--pure-input-font-size);
    color: var(--pure-input-color);
    background-color: var(--pure-input-background-color);
    border-radius: var(--pure-input-border-radius, 5px);
    border: var(--pure-input-border-width, 1px) var(--pure-input-border-style, solid) var(--pure-input-border-color, var(--pure-border-color-gary));
    margin: var(--pure-input-margin);
    padding: var(--pure-input-padding, 0 0.5em);
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--pure-input-gap, 5px);
    transition: border-color 0.3s;


    &:focus-within {
        border: var(--pure-input-focus-border-width, 2px) var(--pure-input-focus-border-style, solid) var(--pure-input-focus-border-color, var(--pure-theme-primary));
    }

    &--disabled {
        background-color: var(--pure-input-disabled-background-color);
        color: var(--pure-input-disabled-color);
        opacity: var(--pure-input-disabled-opacity, var(--pure-opacity-disabled));
        pointer-events: none;
        user-select: none;
    }

    &__input {
        width: 100%;
        height: 100%;
        font-size: inherit;
        border: none;
        outline: none;
    }

    &__icon {
        font-size: var(--pure-input-icon-font-size);
        color: var(--pure-input-icon-color);
        margin: var(--pure-input-icon-margin);
        padding: var(--pure-input-icon-padding);

        &--front {
            font-size: var(--pure-input-icon-front-font-size);
            color: var(--pure-input-icon-front-color);
            margin: var(--pure-input-icon-front-margin);
            padding: var(--pure-input-icon-front-padding);
        }

        &--after {
            font-size: var(--pure-input-icon-after-font-size);
            color: var(--pure-input-icon-after-color);
            margin: var(--pure-input-icon-after-margin);
            padding: var(--pure-input-icon-after-padding);
        }
    }

    &__clear {
        font-size: var(--pure-input-icon-clear-font-size);
        color: var(--pure-input-icon-clear-color);
        margin: var(--pure-input-icon-clear-margin);
        padding: var(--pure-input-icon-clear-padding);
    }
}